<template>
	<view class="content">
		<view class="top-img">
			<image style="width: 100%;height: 100%;" src="../../../static/img/rwdt.png" mode="aspectFill"></image>
		</view>
		<view class="gz">
			<view class="title">规则说明：</view>
			<view class="cont">
				<view>领取任务可获得鸭鸭卡奖励。</view>
				<view>鸭鸭卡可兑换各种奖品。</view>
				<view>每月会更新不同种类的任务欢迎大家完成！</view>
			</view>
		</view>
		<uni-notice-bar :font-size="14" background-color="transparent" color="rgba(136, 130, 130, 1)" class="notice"
			scrollable single :text="msg" :speed="20"></uni-notice-bar>
		<view class="rwlb">
			<view class="line"></view>
			<view class="text">任务列表</view>
		</view>
		<view class="list">
			<view class="item" v-for="i in taskList" @click="toDetail(i)">
				<text
					:style="{borderColor:i.cate && i.cate.color,color:i.cate && i.cate.color}">{{i.cate && i.cate.name}}</text>
				{{i.name}}
				<view>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAction
	} from '../../../common/request'
	export default {
		data() {
			return {
				taskList: [],
				msg: ''
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (token) {
				getAction('/task', {
					pageSize: 999
				}).then(res => {
					this.taskList = res.data.data
				})
				getAction('/msg', {
					pageSize: 999
				}).then(res => {
					this.msg = res.data.join(',')
				})
			}

		},
		methods: {
			toDetail(row) {
				uni.navigateTo({
					url: "/pages/task/detail/detail?id=" + row.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.top-img {
		width: 100%;
		height: 254rpx;
	}

	.gz {
		height: 260rpx;
		width: 650rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #979797;
		padding-top: 40rpx;
		padding-left: 32rpx;

		.title {
			font-size: 28rpx;
			color: rgba(235, 14, 14, 1);
			margin-bottom: 30rpx;
		}

		.cont {
			color: rgba(79, 79, 79, 1);
			font-size: 24rpx;
			white-space: pre-line;
			word-break: break-all;
		}
	}

	.rwlb {
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		position: relative;
		margin-bottom: 60rpx;

		.line {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 50%;
			height: 2rpx;
			background: rgba(151, 151, 151, 1);
		}

		.text {
			background: #FFF;
			position: relative;
			z-index: 2;
			display: inline-block;
			padding: 0 20rpx;
			font-size: 48rpx;
			color: rgba(250, 10, 10, 1);
		}
	}

	.list {

		padding-bottom: 100rpx;
	}

	.item {
		position: relative;
		padding: 0 100rpx 0 16rpx;
		color: rgba(72, 74, 75, 1);
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 44rpx;
		margin-bottom: 40rpx;


		>text {
			display: inline-block;
			padding: 0 10rpx;
			height: 38rpx;
			line-height: 38rpx;
			border: 2rpx solid;
			font-size: 20rpx;
			margin-right: 10rpx;
			vertical-align: middle;
			margin-top: -5rpx;
		}

		>view {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>